<template>
	<view class="shoppingCart">
		<view class="topBack">
			<u-checkbox-group @change="checkboxGroupChange" :wrap="true">
				<u-swipe-action v-for="(item, index) in list" :key="item.id" :index="index" :show="item.show"
					:options="options" @click="handleDelete(item)">
					<view class="checkDivItem">
						<view class="checkItemLeft">
							<u-checkbox @change="checkboxChange" v-model="item.checked" active-color="#FAE24E"
								:name="item.id"></u-checkbox>
							<image class="checkItemLeftImg" :src="item.goods.image"></image>
							<view class="checkItemLeftRight">
								<text class="checkItemLeftRightTop">{{item.goods.title}}</text>
								<text class="checkItemLeftRightBottom"><text
										class="fh">￥</text>{{item.goods.price}}</text>
							</view>
						</view>
						<!-- 记数器 -->
						<!-- <u-number-box v-model="item.goods_num" @change="valChange(item,$event)"></u-number-box> -->
					</view>


				</u-swipe-action>
			</u-checkbox-group>


		</view>
		<!-- 底部 -->
		<view class="buttomDiv">

			<view class="buttomLeftDiv">
				<u-checkbox @change="checkedAll" v-model="allChecked" active-color="#FAE24E">全选</u-checkbox>
				<text class="hjText">合计：</text>
				<text class="moneyText">￥{{amountTo}}</text>
				<!-- <text class="del" @click="handleDeletes" v-if="amountTo">删除</text> -->
			</view>
			<button class="buttomRight" @click="shoppingCartOrdering">结算</button>
		</view>
	</view>
</template>

<script>
	import {
		cartList,
		cartCreate
	} from '@/api/my.js'
	import {
		pay
	} from '@/api/index.js'
	import {
		delCart
	} from '@/api/shoppingMall.js'
	export default {
		data() {
			return {
				options: [

					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				amountTo: 0,
				allChecked: false,
				value: 0,
				list: [
					// {
					// 	name: '智能宠物防丢卡',
					// 	num:'13.90',
					// 	checked: false,

					// },
					// {
					// 	name: '智能宠物防丢卡',
					// 	num:'13.90',
					// 	checked: false,

					// },
					// {
					// 	name: '智能宠物防丢卡',
					// 	num:'13.90',
					// 	checked: false,

					// }
				],
				pages: {
					page: 1,
					limit: 10,
				},
				status: 'loadmore',
				iconType: 'circle',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				idList: [],

			}
		},
		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {

			// 购物车列表
			this.pages.page = 1;
			this.myCart();
			this.idList = []
			this.allChecked = false
			this.amountTo = 0
		},
		onReachBottom() {


			this.pages.page++;
			this.myCart();
		},

		onLoad(options) {

		},

		watch: {

		},
		methods: {

			// 删除单个购物车
			handleDelete(data) {
				let that = this
				uni.showModal({
					title: '删除商品',
					content: '删除购物车商品需要重新添加哦~~',
					success: function(res) {
						if (res.confirm) {
							delCart({
								id: data.id
							}).then(res => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								that.myCart();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

				console.log(data, 'data')
			},

			// 删除多个购物车
			handleDeletes() {
				console.log(this.idList, 'llllll')
			},

			myCart() {
				let data = this.pages;
				cartList(data).then((res) => {
					// console.log(res,'购物车列表')
					if (res.code == 200) {
						// this.goodsList = res.data.list;
						if (this.pages.page == 1) {
							if (res.data.length == 0) {

								this.status = this.loadText.nomore;
							}

							this.list = res.data;


						} else if (this.pages.page > 1) {
							if (res.data.length == 0) {

								this.status = this.loadText.nomore;
							} else {

								this.list = [...this.list, ...res.data]

							}


						}
						this.list.forEach((item, index) => {
							// item.checked=true;
							this.$set(item, 'checked', false)
							this.$set(item, 'show', false)
						})
					}
				}).catch((res) => {})
			},
			shoppingCartOrdering() {
				let data = {
					ids: this.idList
				};
				cartCreate(data).then((res) => {
					// console.log(res,'看看购物车下单信息')
					if (res.code == 200) {
						uni.navigateTo({
							url: "/pages/confirmAnOrder/confirmAnOrder?pageJson=" + encodeURIComponent(JSON
								.stringify(res
									.data))
						})
						// console.log('下单成功了去拿支付的参数')
						// let datas = {
						// 	order_sn:res.data.order_sn,
						// 	address_id:res.data.address.id,
						// 	goods_info:res.data.order_goods
						// };
						// console.log(datas,'去支付传的参数')



						// pay(datas).then((resPay)=>{
						// 	console.log(resPay,'支付接口')
						// 	if(res.code==200){
						// 		uni.requestPayment({
						// 		    provider: 'wxpay',
						// 		    timeStamp: resPay.data.timeStamp,
						// 		    nonceStr: resPay.data.nonceStr,
						// 		    package: resPay.data.package,
						// 		    signType: resPay.data.signType,
						// 		    paySign: resPay.data.paySign,
						// 		    success: function (resz) {
						// 		        console.log('支付成功');
						// 				uni.navigateTo({
						// 					url:"/pages/myOrder/myOrder"
						// 				})
						// 		    },
						// 		    fail: function (resz) {
						// 		        console.log(resz);
						// 		        console.log('支付失败');
						// 		    }
						// 		});
						// 	}

						// }).catch((res)=>{})
					}

				}).catch((res) => {})
			},
			valChange(item, e) {
				console.log('当前值为: ' + e.value)
				item.goods_price = ((e.value) * (parseFloat(item.goods.price))).toFixed(2)
				console.log(item.goods_price, '看看当前这条数据的总价')
				let monner = 0;
				this.list.forEach((item, index) => {
					if (item.checked) {
						monner += parseFloat(item.goods_price)
					}
				})
				this.$set(this, 'amountTo', monner)
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				console.log(e, '看看单个选择或取消改变时');
				// this.idList.push(e.name)
				// this.idList = Array.from(new Set(this.idList))
				// console.log(this.idList, 'idididididi')


			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e, '看看单个选择或取消改变时checkbox-group触发得到的是一个选择的name的数组');
				this.idList = e;
				let monner = 0;

				this.list.forEach((item, index) => {
					if (item.checked) {
						monner += parseFloat(item.goods_price)

					}
				})
				if (e.length == this.list.length) {
					this.$set(this, 'allChecked', true)
				} else {
					this.$set(this, 'allChecked', false)
				}

				this.$set(this, 'amountTo', monner)

			},
			// 全选
			checkedAll(e) {
				console.log(e, '全选或全不选')
				if (e.value) {
					this.list.forEach(item => {
						this.idList.push(item.id)
						this.idList = Array.from(new Set(this.idList))
					})
				}
				if (e.value) {
					let monner = 0;


					this.list.map(val => {
						val.checked = true;
						monner += parseFloat(val.goods_price)
					})

					this.$set(this, 'amountTo', monner)
				} else {
					this.list.map(val => {
						val.checked = false;
					})

					this.$set(this, 'amountTo', 0)
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.shoppingCart {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.topBack {
		width: 750rpx;
		height: 216rpx;
		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);
		display: flex;
		flex-direction: column;
		padding: 40rpx 30rpx 0 30rpx;
		box-sizing: border-box;
	}

	.checkDivItem {
		width: 690rpx;
		// height: 168rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 24rpx 30rpx 24rpx 16rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.checkItemLeft {
		display: flex;
		align-items: center;
	}

	.checkItemLeftImg {
		width: 120rpx;
		height: 120rpx;
		background: #FFFCEF;
		border-radius: 10rpx;

		border: 1rpx solid #683518;
		box-sizing: border-box;
		margin-left: 16rpx;
	}

	.checkItemLeftRight {
		display: flex;
		flex-direction: column;
		margin-left: 24rpx;
	}

	.checkItemLeftRightTop {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
	}

	.checkItemLeftRightBottom {
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #EB1515;
		margin-top: 9rpx;
	}

	.fh {
		font-size: 24rpx;
	}

	.buttomDiv {
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2;
		display: flex;
		justify-content: space-between;

	}

	.buttomLeftDiv {
		width: 490rpx;
		height: 98rpx;
		padding: 0 0 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.hjText {
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #683518;
	}

	.moneyText {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #EB1515;
		margin-right: 20upx;
	}

	.del {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #EB1515;
	}

	.buttomRight {
		width: 260rpx;
		height: 98rpx;
		background: #FED24C;
		outline: none;
		border: none;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #2E2908;
		text-align: center;
		line-height: 98rpx;
		border-radius: 0;
	}
</style>